<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('执行详情')" />
    <style>
        .col-md-6
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="panel-body">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default" th:each="item:${data}">
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" th:onclick="'showStep(\''+${item.id}+'\');'" th:style="'color: '+${item.status=='COMPLETED'?'green' : 'red'}"  th:href="'#job'+${item.id}" th:text="${item.des}+'('+${item.startDate}+'~'+${item.endDate}+' 累计耗时'+${item.times}+'秒)           -----'+${item.status}"></a>
                            </h5>
                        </div>
                        <div th:id="'job'+${item.id}" class="panel-collapse collapse">
                            <div class="panel-body">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>步骤名称</th><th>状态</th><th>读取条数</th><th>写入条数</th><th>跳过条数</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">
    var prefix = ctx + "etl/exec";
    function showStep(id) {
        $.ajax({
            url: prefix+"/queryStep/"+id,
            cache: false,
            type: 'GET',
            async: false,
            dataType: 'json',
            success: function (result) {

                var tbodyHtml = $("#job"+id).find(".table-bordered tbody").html();
                if(tbodyHtml!=undefined) {
                    return ;
                }
                if(result.code==0 ) {
                    var data = result.data.data;
                    var id = result.data.id;
                    var html="";var status;
                    $.each(data,function (index,item) {
                        status = item.status;
                        if(status!="COMPLETED") {
                            status = "<font style='color:red'>"+status+"</font>";
                        }
                        html+="<tr><td>"+item.stepName+"</td><td>"+status+"</td><td>"+item.readCount+"</td><td>"+item.writeCount+"</td><td>"+item.skipCount+"</td></tr>"
                    });
                    $("#job"+id).find(".table-bordered tbody").html(html);
                }

            }
        });
    }
</script>
</body>
</html>